---
import Layout from "@layouts/Layout.astro";

import Readme from "../../README.md";
import GreetingHeadline from "@libs/tt.astro";

import Ss from "@libs/ss.svelte";
// import { map } from "nanostores";
const htmlString = "<p>原始 HTML 内容</p>";
import { info } from "@libs/config/siteconfig";
// const response = await fetch('https://owen-wilson-wow-api.herokuapp.com/wows/random');
// const data = await response.json();
const title = "Home";
const description =
  "Astro-Ink is a crisp, minimal, personal blog theme for Astro";
// import Section from "@libs/Section.astro";
import Video from "@libs/Video.astro";

// const ip = Astro.clientAddress;
import Tt from "@libs/toaster/tt.svelte";
import Demo from "@libs/threlte/demo.svelte";
import Customnodes from "@libs/svelvet/customnodes.svelte";
import Customedges from "@libs/svelvet/customedges.svelte";
// import Demohtml from "@libs/svelvet/demohtml.svelte"

import astroimg from "../assets/e1fe9925bc315c60e979657331100c194b5477ee.png";
---

<Layout content={{ title, description }}>
  <div z-0 my-5>
    <div>
      <h1>当前链接是：{Astro.url}</h1>
      <h1>当前链接路径名是：{Astro.url.pathname}</h1>
      <h1>当前链接源是：{Astro.url.origin}</h1>
    </div>
    <!-- <p>
      你的 IP 地址是：<span class="address">{Astro.clientAddress}</span>
      由 <a href="https://astro.build">{Astro.generator}</a> 构建
    </p> -->
    <Tt client:only />
    <GreetingHeadline name={info.name}>
      <Readme />
      <!-- t=0.001 is a hack to make iPhone show video thumbnail -->

      <Ss client:visible />

      <div class="grid grid-flow-col justify-around gap-5">
        <!-- <Test client:visible /> -->

        <img src={astroimg} alt="new image" />
      </div>

      <!-- <h1>Using an API</h1>
<p>
  With native fetch built-in, Astro makes it easy
  to work with data from any API.
  Powered by https://owen-wilson-wow-api.herokuapp.com.
</p>
<audio controls>
  <source src={data.audio} type="audio/mpeg">
</audio> -->
      <Video src="Jellyfish-110877.mp4#t=0.001" />

      <p slot="after-footer">{info.footer}</p>
      <Fragment set:html={htmlString} />
      <Customnodes client:idle />

      <!-- <Demohtml client:idle></Demohtml>  -->
    </GreetingHeadline>
  </div>
  <Customedges client:only />
  <div class="flex justify-center h-auto w-auto my-5">
    <Demo client:visible />
  </div>
</Layout>

<style>
  main {
    background: #a92828;
  }
</style>
